<template>
    <div class="date-container">
        <component
            :is="`a-${form}-picker`"
            v-model:value="computedValue"
            :mode="mode"
            :valueFormat="valueFormat"
            :placeholder="placeholder"
            :showTime="showTime"
            :disabledDate="disabledDate"
            :allowClear="allowClear"
            @change="handleChange"
        ></component>
    </div>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue';
// import { Moment } from 'moment';

export default defineComponent({
    name: 'datetimepicker',
    props: {
        value: {
            type: [String, Array],
            default: () => '',
        },
        form: {
            type: String,
            default: () => 'date',
        },
        valueFormat: {
            type: String,
            default: () => 'YYYY-MM-DD',
        },
        mode: {
            type: [String, Array],
            default: () => 'date',
        },
        disabled: {
            type: Boolean,
            default: () => false,
        },
        placeholder: {
            type: [String, Array],
        },
        showTime: {
            type: Boolean,
            default: () => false,
        },
        disabledDate: {
            type: Function,
            default: () => null,
        },
        disabledTime: {
            type: Function,
            default: () => null,
        },
        allowClear: {
            type: Boolean,
            default: () => true,
        },
    },
    setup(props, { emit }) {
        const { value } = props;
        const computedValue = ref(value);
        const handleChange = (payload: Event) => {
            emit('update:value', payload);
        };
        return {
            computedValue,
            handleChange,
        };
    },
});
</script>
<style lang="scss" scoped></style>
